<template>
    <div class="order-container">
        <div class="order-wrap">
            <div class="total-wrap" @click="showCarList">
                <div class="uu-img" id="car-box">
                    <img v-show="selectedProducts.length" src="../assets/uu_box_ani.png" id='uu-box-animation' />
                    <img v-show='!selectedProducts.length' src="../assets/uu_box_gray.png" />
                    <span v-if="selectedProducts.length" class="red-circle">{{ selectedProducts.length }}</span>
                </div>
                <div class="total-box">
                    <h3>参考价：￥{{ $store.state.totalPrice }}</h3>
                    <p>实际价格以跑男购买小票为准</p>
                </div>
            </div>
            <div @click="submitOrder" :class="selectedProducts.length ? '' : 'order-btn-gray'" class="order-btn-wrap">
                立即下单
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
            // 选择的商品种类列表
            selectedProducts() {
                return this.$store.state.selectedProducts;
            }
        },
        methods: {
            submitOrder() {
                // 下单的商品
                console.log(this.$store.state.selectedProducts);
            },
            showCarList() {
                this.$emit('show-car-list');
            }
        }
    }
</script>

<style scoped>
.order-container {
    box-sizing: border-box;
    padding: 0.1rem;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 0.74rem;
}
.order-wrap {
    display: flex;
    height: 0.5rem;
}
.total-wrap {
    display: flex;
    align-items: center;
    flex-basis: 2.55rem;
    background-color: #333333;
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}
.uu-img{
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    overflow: hidden;
    /* background-image: url(../assets/uu_box_ani.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0 0; */
}
.uu-img img {
    width: auto;
    height: 0.5rem;
    position: absolute;
    left: 0;
    top: -0.03rem;
}
.red-circle{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0.1rem;
    width: 0.15rem;
    height: 0.15rem;
    line-height: 0.15rem;
    border-radius: 0.15rem;
    background-color: red;
    color: #fff;
    font-size: 0.1rem;
    text-align: center;
}

.total-box h3{
    margin: 0;
    color: #fff;
    font-size: 0.14rem;
}
.total-box p {
    margin: 0;
    margin-top: 0.1rem;
    color: #999999;
    font-size: 0.11rem;
}
.order-btn-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background-image: linear-gradient(#FF9111, #FF752F);
}
.order-btn-gray {
    background-image: linear-gradient(#9E9E9E, #8D8D8D);
}
</style>